<template>
  <view class="login-container">
    <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
    <view class="login-navbar">
      <view class="navbar-content">
        <view class="nav-left"></view>
        <text class="nav-title">登录</text>
        <view class="nav-right">
          <view class="nav-action-btn">
            <text class="action-dots">⋯</text>
          </view>
          <view class="nav-action-btn">
            <text class="action-location">📍</text>
          </view>
        </view>
      </view>
    </view>

    <view class="login-content">
      <view class="logo-section">
        <view class="logo-container">
          <view class="logo-icon">
            <text class="medical-cross">✚</text>
          </view>
        </view>
        <view class="brand-info">
          <text class="brand-name-cn">汉菱医疗</text>
          <text class="brand-name-en">Han ling medical</text>
        </view>
      </view>

      <view class="login-actions">
        <button class="wechat-login-btn" open-type="getPhoneNumber" @getphonenumber="handelMpWeixinMobileLogin($event)" @click="wechatLogin">
          <text class="login-btn-text">微信登录</text>
        </button>
      </view>

      <view class="agreement-section">
        <view class="agreement-checkbox" @click="toggleAgreement">
          <view class="checkbox" :class="{checked: isAgreed}">
            <text v-if="isAgreed" class="check-icon">✓</text>
          </view>
          <text class="agreement-text">我已阅读并同意</text>
          <text class="agreement-link">《服务协议》</text>
          <text class="agreement-text">和</text>
          <text class="agreement-link">《隐私政策》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import store from '@/store'
	import { isEmpty } from '@/utils/util'
	import * as Api from '@/api/wxofficial'
export default {
  data() {
    return {
      statusBarHeight: 0,
      isAgreed: true,
	  code: '',
    }
  },
  onLoad() {
    this.getSystemInfo()
  },
  created() {
  	
    // if(!this.is_login){
  	  // 处理微信回调
  	  this.onCallback()
    // }
    
  },
  methods: {
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },
	// 处理微信回调
	async onCallback() {
		this.code = await this.getCode()
		Api.oauthUserOpenid(this.code)
			.then(({ data }) => {
				console.log('userInfo：', data)
			if(data.openid&&data.openid!==''&&data.openid!==null&&data.openid!==undefined){
				uni.setStorageSync('OPENID_KEY', data.openid)
			}
		})
	
	
	
	},
	// 微信授权获取手机号一键登录
	// getphonenumber事件的回调方法
	async handelMpWeixinMobileLogin({ detail }) {
	  const app = this
	  if (detail.errMsg !== 'getPhoneNumber:ok') {
	    app.$error(detail.errMsg)
	    return
	  }
	  store.dispatch('LoginMpWxMobile', {
	      code: app.code,
	      encryptedData: detail.encryptedData,
	      iv: detail.iv,
	      isParty: false,
	      partyData: [],
	      refereeId: store.getters.refereeId
	    })
	    .then(result => {
	      // 显示登录成功
	      app.$toast(result.message)
	      // 跳转回原页面
			setTimeout(() => {
				if(result.data.identity == 0){
					this.$navTo('pages/userInit/index')
				} else {
					this.$navTo('pages/health/index')
				}
			}, 2000)
	    })
	    .catch(err => {
	      const resultData = err.result.data
	      // 显示错误信息
	      if (isEmpty(resultData)) {
	        app.$toast(err.result.message)
	      }
	      // 跳转回原页面
	      if (resultData.isBack) {
	        setTimeout(() => app.onNavigateBack(1), 2000)
	      }
	    })
	},
    toggleAgreement() {
      this.isAgreed = !this.isAgreed
    },
	getCode() {
	  return new Promise((resolve, reject) => {
	    uni.login({
	      provider: 'weixin',
	      success: res => {
	        console.log('code', res.code)
	        resolve(res.code)
	      },
	      fail: reject
	    })
	  })
	},
    async wechatLogin() {
      if (!this.isAgreed) {
        uni.showToast({
          title: '请先同意用户协议',
          icon: 'none'
        })
        return
      }
	  this.code = await this.getCode()
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: #FFFFFF;
}

.status-bar {
  background: #FFFFFF;
}

.login-navbar {
  height: 88rpx;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}

.login-navbar .navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 32rpx;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.nav-right {
  display: flex;
  align-items: center;
}

.nav-action-btn {
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16rpx;
}

.action-dots, .action-location {
  font-size: 24rpx;
  color: #666666;
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 64rpx 0;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 200rpx;
}

.logo-container {
  margin-bottom: 40rpx;
}

.logo-icon {
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(78, 205, 196, 0.3);
}

.medical-cross {
  font-size: 80rpx;
  color: #FFFFFF;
  font-weight: bold;
}

.brand-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-name-cn {
  font-size: 48rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 16rpx;
}

.brand-name-en {
  font-size: 32rpx;
  color: #666666;
  font-weight: 300;
}

.login-actions {
  width: 100%;
  margin-bottom: 100rpx;
}

.wechat-login-btn {
  width: 100%;
  height: 96rpx;
  background: #4ECDC4;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(78, 205, 196, 0.3);
}

.login-btn-text {
  font-size: 32rpx;
  color: #FFFFFF;
  font-weight: 500;
}

.agreement-section {
  position: fixed;
  bottom: 60rpx;
  left: 64rpx;
  right: 64rpx;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.checkbox {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #4ECDC4;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  background: #FFFFFF;
}

.checkbox.checked {
  background: #4ECDC4;
}

.check-icon {
  font-size: 20rpx;
  color: #FFFFFF;
  font-weight: bold;
}

.agreement-text {
  font-size: 24rpx;
  color: #666666;
  margin-right: 8rpx;
}

.agreement-link {
  font-size: 24rpx;
  color: #4ECDC4;
  margin-right: 8rpx;
}
</style>
